<template>
	<view class="container">
		<view class="title">宋庆龄基金会</view>
		<view class="">
			<view class="gui-form-body">
				<input type="text" class="gui-form-input" v-model="formData.username" 
					placeholder="请输用户名" maxlength="11"/>
			</view>
		</view>
		<view class="">
			<view class="gui-form-body" style="position: relative;" v-show="inputType == 'text'">
				<input type="text" class="gui-form-input" v-model="formData.password" 
					placeholder="请输入密码" />
					<image src="https://oss.mapaikeji.cn/images/1/2023/09/d54848b5ebdaf74974b551d6828c8608.png" style="width:50rpx;height:40rpx" class="input-icon" @click="toggleIcon(0)"></image>
			</view>
			<view class="gui-form-body" style="position: relative;" v-show="inputType == 'password'">
				<input type="password" class="gui-form-input" v-model="formData.password" 
					placeholder="请输入密码" />
					<image src="https://oss.mapaikeji.cn/images/1/2023/09/396fee446484ff5568c0dc4e4ca7385d.png" style="width:50rpx;height:40rpx" class="input-icon" @click="toggleIcon(1)"></image>
			</view>
		</view>
		<view  @click="onSubmit" style="margin-top: 60rpx;">
			<view class="gui-text-center gui-bg-light login-btn" hover-class="gui-tap">
				<text
					class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center ">登录</text>
			</view>
		</view>
		<image src="https://oss.mapaikeji.cn/images/1/2023/09/396fee446484ff5568c0dc4e4ca7385d.png" style="display: none;"></image>
		<image src="https://oss.mapaikeji.cn/images/1/2023/09/d54848b5ebdaf74974b551d6828c8608.png" style="display: none;"></image>
		<view class="gui-margin-top">
			<checkbox-group @change="changeRememberPassword"><checkbox value="bb" :checked="true" />记住密码</checkbox-group>
		</view>
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					username:'',
					password:''
				},
				isRememberPassword:true,
				inputType:'password'
			}
		},
		onLoad() {
			let login = uni.getStorageSync('login');
			if(this.isRememberPassword && login){
				this.formData.username = login.username
				this.formData.password = login.password;
				//this.formData.password = this.base64encode(login.password);
			}
		},
		methods: {
			
			//base64编码
			base64encode(str){
				var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
				var base64DecodeChars = new Array(-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
			    var out, i, len;
			    var c1, c2, c3;
			    len = str.length;
			    i = 0;
			    out = "";
			    while (i < len) {
			        c1 = str.charCodeAt(i++) & 0xff;
			        if (i == len) {
			            out += base64EncodeChars.charAt(c1 >> 2);
			            out += base64EncodeChars.charAt((c1 & 0x3) << 4);
			            out += "==";
			            break;
			        }
			        c2 = str.charCodeAt(i++);
			        if (i == len) {
			            out += base64EncodeChars.charAt(c1 >> 2);
			            out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
			            out += base64EncodeChars.charAt((c2 & 0xF) << 2);
			            out += "=";
			            break;
			        }
			        c3 = str.charCodeAt(i++);
			        out += base64EncodeChars.charAt(c1 >> 2);
			        out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
			        out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
			        out += base64EncodeChars.charAt(c3 & 0x3F);
			    }
			    return out;
			},
			onVerify(){
				let phoneVerify = new RegExp('^[1][3,4,5,6,7,8,9][0-9]{9}$')
				
				if(this.formData.username === ''){
					uni.showToast({
						title: '请输入用户名',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				// if(!phoneVerify.test(this.formData.mobile)){
				// 	uni.showToast({
				// 		title: '手机号格式错误',
				// 		duration: 2000,
				// 		icon:'none'
				// 	});
				// 	return false;
				// }
				
				if(this.password === ''){
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				return true;
			},
			async onSubmit(){
				if(this.onVerify()){
					let password = this.base64encode(this.formData.password)
					if(this.isRememberPassword){
						uni.setStorageSync('login',{
							username:this.formData.username,
							password:this.formData.password
						});
					}else{
						uni.setStorageSync('login','');
					}
					let res = await this.$http.post(`/admin/login`,{
						username:this.formData.username,
						password:password
					})
					
					this.loginRepeat();
					
				}
			},
			async loginRepeat(){
				let res = await this.$http.post(`/admin/shop?route=index.index&uniacid=2&pwd_remind=0`,{
					is_sms:0,
					login_type:10,
					remember:0,
					mobile:this.formData.username,
					password:this.formData.password
				})
				this.getStoreId();
			},
			async getStoreId(){
				let res = await this.$http.post(`/admin/shop?route=plugin.store-cashier.store.admin.store-index.getStoreCashierInfo`)
				uni.setStorageSync('store_id',res.data.data.id);
				this.toIndex();
			},
			toIndex(item){
				uni.navigateTo({
					url: `/pages/index/index`
				})
			},
			toggleIcon(type){
				if(type == 0){
					this.inputType = 'password';
				}else{
					this.inputType = 'text';
				}
			},
			changeRememberPassword(e){
				if(e.detail.value.length){
					this.isRememberPassword = true;
				}else{
					this.isRememberPassword = false;
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
.container{
	padding:00rpx 50rpx 0 50rpx;
	.title{
		font-size: 38rpx;
		text-align: center;
		margin-top: 150rpx;
		margin-bottom: 30rpx;
		color:#9e7e35;
	}
	.login-btn{
		border-radius:50rpx
	}
	.gui-footer-large-button-text{
		line-height: 90rpx !important;
	}
	.gui-form-body{
		width:100%;
		margin-left: 0;
		background-color: #eee;
		border-radius:50rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
	}
	.gui-form-input{
		width:80%;
		margin-left:40rpx;
		height:50rpx;
		line-height: 50rpx;
	}
}
.input-icon{
	position: absolute;
	right:30rpx;
	top:24rpx
}
.gui-bg-light{
	background-color: #9e7e35;
}
</style>